<template>
    <div class="ranking-ranking">
        <h4 style="font-size: 20px;color: #fff;">官方榜</h4>
        <a-card hoverable style="width: 240px" v-for="item in Rankinglist" :key="item.id" class="ranking-box">
            <template #cover>
                <img alt="example" :src="item.coverImgUrl" />
            </template>
            <a-card-meta :title="item.name">
                <template #description>{{ item.updateFrequency }}</template>
            </a-card-meta>

            <div class="ranking-imgbox-icon">
                <span></span>
            </div>

        </a-card>
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getRankingApi } from '@/api/rankingApi'
import type { IgetRankList } from '@/api/rankingApi'

const Rankinglist = ref<IgetRankList[]>([])

const getRanking = async () => {

    try {
        const res = await getRankingApi()
        res.list.forEach(item => {
            Rankinglist.value.push({ coverImgUrl: item.coverImgUrl, id: item.id, description: item.description, name: item.name, updateFrequency: item.updateFrequency })
            console.log(item.id);
        })
        console.log('res', Rankinglist.value);
    } catch (error) {
        console.log(error);
    }
}

onMounted(() => {
    getRanking()
})

</script>


<!-- <script> 

    "list": [
        {
            "subscribers": [],
            "subscribed": null,
            "creator": null,
            "artists": null,
            "tracks": null,
            "updateFrequency": "刚刚更新",
            "backgroundCoverId": 0,
            "backgroundCoverUrl": null,
            "titleImage": 0,
            "titleImageUrl": null,
            "englishTitle": null,
            "opRecommend": false,
            "recommendInfo": null,
            "socialPlaylistCover": null,
            "adType": 0,
            "subscribedCount": 4016671,
            "cloudTrackCount": 0,
            "trackNumberUpdateTime": 1677542386760,
            "userId": 1,
            "createTime": 1404115136883,
            "highQuality": false,
            "specialType": 10,
            "updateTime": 1677542386827,
            "anonimous": false,
            "newImported": false,
            "trackCount": 100,
            "coverImgUrl": "https://p2.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg",
            "coverImgId": 109951166952713760,
            "totalDuration": 0,
            "trackUpdateTime": 1677579587207,
            "commentThreadId": "A_PL_0_19723756",
            "privacy": 0,
            "playCount": 5392963072,
            "description": "云音乐中每天热度上升最快的100首单曲，每日更新。",
            "ordered": true,
            "tags": [],
            "status": 0,
            "name": "飙升榜",
            "id": 19723756,
            "coverImgId_str": "109951166952713766",
            "ToplistType": "S"
        },

</script> -->

<style lang="scss" scoped>
.ant-card {
    float: right;
    margin: 15px 13px;
}
.ranking-box:hover .ranking-imgbox-icon{
    opacity: 1;
}


.ranking-imgbox-icon {
    background-color: #fff;
    height: 3.5vw;
    width: 3.5vw;
    position: absolute;
    bottom: 8vw;
    right: 6vw;
    border-radius: 50%;
    opacity: 0;
    transition: all .5s;

    &>span {
        height: 0;
        width: 0;
        position: absolute;
        border: transparent solid 0.8vw;
        border-left: 1.3vw solid #EC4141;
        top: 0;
        bottom: 0;
        left: 1.2vw;
        margin: auto;
    }
}
</style>

